![Amplify Framework UIコンポーネントの既存Angularプロジェクトへの埋め込みを考える](https://devio2023-media.developers.io/wp-content/uploads/2019/05/aws-amplify.png)
Amplify Framework UIコンポーネントの既存Angularプロジェクトへの埋め込みを考える
こんにちは!DA(データアナリティクス)事業本部 インテグレーション部の大高です。
先日、試してみたAmplify FrameworkのUIコンポーネントについて、実際のAngularプロジェクトでの使い方を考えてみました。
今回、既存のAngularプロジェクトが既に存在しており、そのプロジェクトに対して認証を設けたいと考えた場合、いくつか検討すべき事項があったのでまとめてみます。
検討事項1:どこにamplify-authenticatorを埋め込むか
先日試した際には、公式のドキュメントにあるサンプルコードと同じく、以下のようにapp.component.html
にamplify-authenticator
を埋め込みました。
<amplify-authenticator> <div> My App <amplify-sign-out></amplify-sign-out> </div> </amplify-authenticator>
これにより、amplify-authenticator
の内部のDOM要素は認証を行わないと表示されないようになり、認証を済ませると表示される、という動きになりました。
動きとしては良いのですが、これを既存のAngularプロジェクトに埋め込みたい時にはちょっと検討が必要そうです。
既存プロジェクトではroutingを利用しているので、app.component.html
のコードは以下になります。
<router-outlet></router-outlet>
お馴染みのrouter-outlet
です。また、app-routing.module.ts
はこんな感じです。
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './components/home/home.component'; const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'home', component: HomeComponent }, ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
コンポーネントとして、HomeComponent
を利用しており、アクセスすると単純にこのコンポーネントを表示しています。
これに対して認証を掛けていきたいと思います。
amplify-authenticatorで括ってみる
単純にrouter-outlet
をamplify-authenticator
で括ってみます。
<amplify-authenticator> <router-outlet></router-outlet> </amplify-authenticator>
この状態で、起動してみましたが画面遷移としては特に問題ありませんでした。
https://localhost:4200/
や、https://localhost:4200/home
にアクセスするとログイン画面が出ますし、ログイン後は想定通りのroutingがされています。
後は必要な箇所にamplify-sign-out
でサインアウトボタンを配置してあげれば問題ないですね。
検討事項2:ログイン画面の配置
特に何も考えずに下記のようにすると、ログイン画面は左上に配置されます。
<amplify-authenticator> <router-outlet></router-outlet> </amplify-authenticator>
ちょっとイケてないので、配置を直してみます。
<div class="authenticator"> <amplify-authenticator> <router-outlet></router-outlet> </amplify-authenticator> </div>
div.authenticator { margin-top: 50px; text-align: center; }
こんな感じに直すと、以下のようにそれっぽいログイン画面の位置になります。なお、amplify-authenticator
にclass
指定でも良いかなと思いましたが、margin-top
が効かないのでdiv
を利用しました。
ログイン後のhome.component.html
と画面はこんな感じです。簡略化のため、home.component.scss
は利用していません。
<div style="width: 300px"> I'm home. <amplify-sign-out></amplify-sign-out> </div>
当然ですが、こちらのコンポーネントもログイン画面でのmargin-top
とtext-align
が効いていますね。ちょっと困るので、app.component
側を修正します。
<div class="authenticator"> <amplify-authenticator> <div class="authenticated-container"> <router-outlet></router-outlet> </div> </amplify-authenticator> </div>
div.authenticator { margin-top: 50px; text-align: center; } div.authenticated-container { margin-top: -45px; text-align: initial; }
すると、ログイン後の画面は以下のようになります。
良さそうです。all: initial
でも良いかなと思いましたが、margin-top
の相殺も消えてしまうのでtext-align: initial
にしました。
まとめ
以上、Amplify Framework UIコンポーネントの既存Angularプロジェクトへの埋め込みを試してみました。これで、既存Angularプロジェクトにもうまく組み込めそうです。また、CSSは得意ではないので、より良い書き方があれば教えて頂けると喜びます!
どなたかのお役に立てば幸いです。それでは!